<template>
    <el-card class="page">

        <!-- 标题 -->
        <template #header>
            <div class="header">
                <span>预约记录</span>
            </div>
        </template>


        <!-- 搜索表单 inline:一行显示 -->
        <el-form inline>
            <!-- 文章分类 -->
            <el-form-item label="预约检索：">
                <!-- 文章分类的下拉框 -->
                <el-input placeholder="预约时间" style="width: 200px;" v-model="queryInput"></el-input>
            </el-form-item>


            <!-- 搜索按钮 -->
            <el-form-item>
                <el-button type="primary" @click="getRecord">搜索</el-button>
                <el-button @click="queryInput = '', queryState = ''">重置</el-button>
            </el-form-item>
        </el-form>


        <!-- 查询所有记录 -->
        <el-table style="width: 100%;" :data="records" stripe>
            <el-table-column label="预约用户" prop="userName"></el-table-column>
            <el-table-column label="妆造风格" prop="styleName" width=300></el-table-column>
            <el-table-column label="摄影师" prop="photoName"></el-table-column>
            <el-table-column label="妆造师" prop="makeName"></el-table-column>
            <el-table-column label="到店时间" prop="oldTime"></el-table-column>
            <el-table-column label="状态" prop="state"></el-table-column>



            <!-- 操作按钮 -->
            <!-- circle:按钮变圆形 -->
            <!-- plain：按钮是朴素的样式。透明背景，只有边框 -->
            <el-table-column label="操作" width="200">
                <template #default="{ row }">
                    <el-button :icon="Search" circle plain type="success"
                        @click="getInfo(row), visibleDrawer = true"></el-button>
                    <el-button :icon="Edit" circle plain type="primary"
                        @click="showDialogData(row), dialogFormVisible = true"></el-button>
                    <el-button :icon="Delete" circle plain type="danger" @click="open(row)"></el-button>
                </template>
            </el-table-column>
            <template #empty>
                <el-empty description="没有数据" />
            </template>
        </el-table>


        <!-- 分页 -->
        <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[3, 5, 10, 15]"
            layout="jumper, total, sizes, pager, next" @current-change="onCurrentChange" @size-change="onSizeChange"
            :total="total" background style="margin-top: 20px;justify-content: flex-end;" />



        <el-dialog v-model="dialogFormVisible" title="修改预约记录" width="600" style="margin-top: 170px;">
            <!-- 修改表单 -->
            <el-form :model="updateRecord" label-width="100px" :rules="rules">

                <el-form-item label="修改妆造师">
                    <el-select placeholder="选择妆造师" v-model="updateRecord.makeId">
                        <el-option v-for="item in makes" :value="item.id" :key="item.id"
                            :label="`高级妆造师：${item.name}`" />
                    </el-select>
                </el-form-item>

                <el-form-item label="修改摄影师">
                    <el-select placeholder="选择摄影师" v-model="updateRecord.photoId">
                        <el-option v-for="item in photos" :value="item.id" :key="item.id" :label="`摄影师：${item.name}`" />
                    </el-select>
                </el-form-item>

                <el-form-item label="修改妆造风格">
                    <el-select placeholder="修改妆造风格" v-model="updateRecord.styleId">
                        <el-option v-for="item in styles" :value="item.id" :key="item.id" :label="`${item.type}`" />
                    </el-select>
                </el-form-item>

                <!-- 修改预约时间 -->
                <el-form-item label="修改到店时间">
                    <el-date-picker v-model="updateInfo.date" type="date" placeholder="请选择日期"
                        :disabled-date="disabledDate" width="210" />
                    <span>---</span>
                    <el-time-select v-model="updateInfo.timeOne" style="width: 232px" :start="startTime" step="01:00"
                        end="16:00" placeholder="请选择时间" />
                </el-form-item>


            </el-form>
            <template #footer>
                <div>
                    <el-button @click="dialogFormVisible = false, clearStaffInfo()">取消修改</el-button>
                    <el-button type="primary" @click="updateRecordInfo">确认修改</el-button>
                </div>
            </template>
        </el-dialog>
    </el-card>


    <!-- 搭建抽屉组件 -->
    <el-drawer v-model="visibleDrawer" title="详情信息" size="70%">
        <div class="box">
            <el-card class="box-div">
                <template #header>
                    <span>用户信息</span>
                </template>
                <div>
                    <p>昵称：<span>{{ user_select.name }}</span></p>
                    <p>联系方式：<span>{{ user_select.phone }}</span></p>
                    <p>注册日期：<span>{{ user_select.time }}</span></p>
                </div>
            </el-card>

            <el-card class="box-div">
                <template #header>
                    <span>摄影师信息</span>
                </template>
                <div>
                    <p>昵称：<span>{{ photo_select.name }}</span></p>
                    <p>联系方式：<span>{{ photo_select.phone }}</span></p>
                    <p><span><img :src="photo_select.pic" class="img"></span></p>
                </div>
            </el-card>
        </div>

        <div class="box" style="margin-top: 40px;">
            <el-card class="box-div">
                <template #header>
                    <span>妆造师信息</span>
                </template>
                <div>
                    <p>昵称：<span>{{ make_select.name }}</span></p>
                    <p>联系方式：<span>{{ make_select.phone }}</span></p>
                    <p><span><img :src="make_select.pic" class="img"></span></p>
                </div>
            </el-card>

            <el-card class="box-div">
                <template #header>
                    <span>妆造信息</span>
                </template>
                <div>
                    <p>类别：<span>{{ style_select.type }}</span></p>
                    <p>详情：<span>{{ style_select.info }}</span></p>
                    <p><span><img :src="style_select.pic" width="170px" height="100px"></span></p>
                </div>
            </el-card>
        </div>
    </el-drawer>
</template>

<script setup>
import { ref } from 'vue';
import managerApi from '@/api/manager';
import record from '@/api/record';
import makeApi from '@/api/make'
import photoApi from '@/api/photo'
import styleApi from '@/api/style';
import userApi from '@/api/user'
import { Edit, Delete, Search, } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus'
//检索数据
const queryInput = ref('');
const queryState = ref('')

const dialogFormVisible = ref(false)

//详情信息显示
const visibleDrawer = ref(false)

//所有订单信息
const records = ref([]);

//修改数据模型
const updateRecord = ref({
    userId: '',
    makeId: '',
    photoId: '',
    styleId: '',
    state: records.value.state,
    id: ''
})

//分页数据模型
const pageNum = ref(1); //当前页
const pageSize = ref(5);//每页条数
const total = ref(10)   //总条数

//每页条数发生变化，自动调用此函数
const onSizeChange = (size) => {
    pageSize.value = size
    getRecord()
}

//页码发生变化，自动调用此函数
const onCurrentChange = (num) => {
    pageNum.value = num
    getRecord()
}


//创建摄影师数据模型
const photos = ref([]);

//创建化妆师数据模型
const makes = ref([]);

//创建妆造风格数据模型
const styles = ref([]);

const users = ref([])

//查询所有摄影师
photoApi.getPhotoAll().then(res => {
    photos.value = res.data.data
})
//查询所有化妆师
makeApi.getMakeAll().then(res => {
    makes.value = res.data.data
})
//查询所有妆造类型
styleApi.getStyleAll().then(res => {
    styles.value = res.data.data
})

userApi.getUser().then(res => {
    users.value = res.data.data
})


//查询所有记录
const getRecord = async () => {
    //传递参数
    let data = {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
        queryInput: queryInput.value ? queryInput.value : null,
        queryState: queryState.value ? queryState.value : null,
    }

    //赋值关联的数据
    const res = await record.getByPageAnMake(data)
    console.log(res)
    if (res.data.code == 0) {
        //条数
        total.value = res.data.data.total
        //数据
        records.value = res.data.data.records

        //处理数据 添加摄影师，化妆师，妆造风格拓展名称 
        for (let i = 0; i < records.value.length; i++) {
            let record = records.value[i]
            //摄影师
            for (let j = 0; j < photos.value.length; j++) {
                if (record.photoId == photos.value[j].id) {
                    record.photoName = photos.value[j].name;
                }
            }
            //妆造师
            for (let j = 0; j < makes.value.length; j++) {
                if (record.makeId == makes.value[j].id) {
                    record.makeName = makes.value[j].name;
                }
            }

            //妆造类型
            for (let j = 0; j < styles.value.length; j++) {
                if (record.styleId == styles.value[j].id) {
                    record.styleName = styles.value[j].type;
                }
            }

            //用户信息
            for (let j = 0; j < users.value.length; j++) {
                if (record.userId == users.value[j].id) {
                    record.userName = users.value[j].name;
                }
            }
        }

    }
}
//自调用
getRecord();

//清除数据模型
const clearStaffInfo = () => {
    updateRecord.value = {
        userId: '',
        makeId: '',
        photoId: '',
        styleId: '',
    }
}


//函数回显数据
const showDialogData = (row) => {
    console.log(row)
    //数据添加id
    updateRecord.value.userId = row.userId
    updateRecord.value.makeId = row.makeId
    updateRecord.value.photoId = row.photoId
    updateRecord.value.styleId = row.styleId
    updateRecord.value.time = row.time
    updateRecord.value.state = row.state
    //添加id
    updateRecord.value.id = row.id
}



const open = (info) => {
    ElMessageBox.confirm(
        '删除为不可逆操作,请确认！',
        '提示',
        {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            //删除员工函数回调
            deleteRecord(info)
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消操作',
            })
        })
}

//id对象  
const data = ref({
    id: ""
})

//删除员工
const deleteRecord = async (info) => {
    data.value.id = info.id
    const res = await record.delete(data.value.id)
    if (res.data.code == 0) {
        ElMessage.success("删除成功")
        //刷新列表
        getRecord()
    }
}

const updateInfo = ref({
    date: '',
    timeOne: '',
})

//最终发送对象

const startTime = ref('10:00')

function disabledDate(time) {
    return time.getTime() < Date.now();
}

const someDate = new Date();
someDate.setDate(someDate.getDate()); // 将当前日期减去1天
disabledDate(someDate); // 传递修改后的Date对象给函数


//修改记录
const updateRecordInfo = async () => {
    if (updateInfo.value.date != '' && updateInfo.value.date != null && updateInfo.value.timeOne != '' && updateInfo.value.timeOne != null) {
        //把日期转为 字符串  -- 正在写
        console.log(updateInfo.value.date)
        const dateObj = updateInfo.value.date;
        const year = dateObj.getFullYear();
        const month = String(dateObj.getMonth() + 1).padStart(2, '0');
        const day = String(dateObj.getDate()).padStart(2, '0');
        const formattedDate = `${year}-${month}-${day}`;
        updateRecord.value.oldTime = formattedDate + "-" + updateInfo.value.timeOne

        const res = await record.update(updateRecord.value)
        console.log(res)
        if (res.data.code == 0) {
            ElMessage.success("修改成功")
            //清空时间模型
            clearUpdateInfo()
            //刷新列表
            getRecord()
            //关闭弹窗
            dialogFormVisible.value = false
        } else {
            ElMessage.error("修改失败")
        }
    } else {
        ElMessage.error("请选择到店时间")
    }
}

const clearUpdateInfo = () => {
    updateInfo.value.date = ''
    updateInfo.value.timeOne = ''
}

//当前用户信息
const user_select = ref('')
const photo_select = ref('')
const make_select = ref('')
const style_select = ref('')


//点击打开抽屉，查看详情
const getInfo = (row) => {

    //用户信息
    for (let j = 0; j < users.value.length; j++) {
        if (row.userId == users.value[j].id) {
            user_select.value = users.value[j]
        }
    }
    //获取当前摄影师数据
    for (let j = 0; j < photos.value.length; j++) {
        if (row.photoId == photos.value[j].id) {
            photo_select.value = photos.value[j]
        }
    }
    //获取妆造师数据
    for (let j = 0; j < makes.value.length; j++) {
        if (row.makeId == makes.value[j].id) {
            make_select.value = makes.value[j]
        }
    }
    //获取妆造风格数据 
    for (let j = 0; j < styles.value.length; j++) {
        if (row.styleId == styles.value[j].id) {
            style_select.value = styles.value[j]
        }
    }

}
</script>

<style scoped>
.page {
    min-height: 100%;
    box-sizing: border-box;
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.box{
    display: flex;
}
.box-div {
    width: 450px;
    margin-left: 50px;
}
.img{
    width: 100px;
    height: 100px;
}
</style>